<template>
    <div class="create-edit-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form ref="ruleFormRef" :model="formData" :rules="ruleForm" label-width="110px">
                <el-form-item :label="dialog.type + '名称'" prop="name">
                    <el-input
                        v-model="formData.name"
                        @input="value => (formData.name = value.trim())"
                        :placeholder="'请输入' + dialog.type + '名称'"
                        maxlength="50"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                    <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { runLabelService } from '@great/services';
import { reactive, ref } from 'vue';
import type { PopupBoxProps } from '@great/utils';
import { useRequest } from 'vue-request';

interface IProps extends PopupBoxProps {
    type: string;
    row?: Record<string, any>;
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    type?: string;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '',
    width: 600,
    detail: undefined
});

const formData = reactive<Record<string, any>>({
    id: undefined,
    name: ''
});
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<FormRules<any>>({
    name: [
        {
            required: true,
            message: `请输入${props.type.includes('分类') ? '分类' : '标签'}名称`,
            trigger: ['blur', 'change']
        }
    ]
});

const buildReq = () => {
    let reqData: Record<string, any> = {};
    let reqName: string = '';
    if (props.type == '新建分类') {
        reqName = 'addCategory';
        reqData = {
            labelTypeName: formData.name
        };
    } else if (props.type == '修改分类') {
        reqName = 'editCategory';
        reqData = {
            labelTypeName: formData.name,
            labelTypeNo: formData.id
        };
    } else if (props.type == '新建标签') {
        reqName = 'addLabel';
        reqData = {
            labelName: formData.name,
            labelTypeNo: props.row?.labelTypeNo,
            parentLabelNo: props.row?.labelNo
        };
    } else if (props.type == '修改标签') {
        reqName = 'editLabel';
        reqData = {
            labelName: formData.name,
            labelNo: props.row?.labelNo
        };
    }
    return { reqName, reqData };
};

// 提交接口请求
const { run, loading } = useRequest(
    () => {
        let { reqName, reqData } = buildReq();
        return runLabelService[reqName](reqData);
    },
    {
        manual: true,
        onSuccess() {
            if (dialog.title.includes('修改')) {
                ElNotification({
                    title: '修改成功！',
                    type: 'success'
                });
            } else {
                ElMessageBox.confirm('请继续维护标签内容！', '创建成功', {
                    cancelButtonText: '完成',
                    showConfirmButton: false,
                    type: 'success'
                }).catch(() => {});
            }
            closeDialog();
        }
    }
);
// 表单提交
const submitForm = () => {
    ruleFormRef.value?.validate(valid => {
        valid && run();
    });
};

//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};

// 打开弹框
const openDialog = () => {
    dialog.title = props.type;
    dialog.type = props.type.includes('分类') ? '分类' : '标签';
    if (props.row && props.type.includes('修改')) {
        dialog.detail = JSON.parse(JSON.stringify(props.row));
        formData.id = dialog.type == '分类' ? props.row.labelTypeNo : props.row.labelNo;
        formData.name = dialog.type == '分类' ? props.row.labelTypeName : props.row.labelName;
    } else {
        delete formData.id;
    }
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss"></style>
